<template>
  <div>
    <!-- 地址 -->
    <el-divider></el-divider>
    <center>
      <el-button type="primary" @click="addAddress">添加地址</el-button>
    </center>
    <el-divider></el-divider>
    <el-dialog
      title="添加地址"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <!--  添加 -->
      <el-form ref="form" :model="Address" label-width="80px">
        <el-form-item label="姓名:">
          <el-input v-model="Address.asName"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="Address.asTelephone"></el-input>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input v-model="Address.asAddress"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUpdateAddress">确 定</el-button>
      </span>
    </el-dialog>
    <div>
      <el-card class="box-card" v-for="(address, index) in list" :key="index">
        <div slot="header" class="clearfix">
          <el-tag type="" effect="dark">签收人姓名:{{ address.asName }}</el-tag>
          <center>
            <el-tag type="success" effect="dark">
              电话号码:{{ address.asTelephone }}
            </el-tag>
          </center>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="updateAddressAsId(address.asId)"
            >修改</el-button
          >
          <el-button
            style="float: right; padding: 3px 3px"
            type="text"
            @click="deleteAddress(address.asId)"
            >删除</el-button
          >
        </div>
        <center>
          <el-tag type="info" effect="dark">
            详细地址:{{ address.asAddress }}</el-tag
          >
        </center>
        <el-switch
          v-model="address.asDefault"
          :active-value="1"
          :inactive-value="0"
          @change="switchUodate(address.asId)"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-card>
    </div>
    <center>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :v-model="page"
        @current-change="currentChage"
        :prev-click="currentChage"
      >
      </el-pagination>
    </center>
  </div>
</template>

<script>
import address from "@/api/address";
export default {
  data() {
    return {
      Address: {
        asName: "",
        asTelephone: "",
        asAddress: "",
        asId: 0,
      },
      list: [],
      page: 1,
      size: 20,
      key: "",
      pages: 0,
      centerDialogVisible: false,
      total: 0,
    };
  },

  methods: {
    /**
     * 添加  弹窗
     */
    addAddress() {
      this.centerDialogVisible = true;
      this.Address = { asName: "", asTelephone: "", asAddress: "", asId: 0 };
    },

    //id查询 地址信息
    updateAddressAsId(id) {
      var Address = {};
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].asId == id) {
          Address = this.list[i];
        }
      }
      this.Address = Address;
      this.centerDialogVisible = true;
    },

    //id删除地址
    deleteAddress(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          address.deleteAddress(id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList(this.page, this.size);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 判断是添加还是修改
     */
    addUpdateAddress() {
      if (this.Address.asId === 0) {
        //添加
        this.addressSave();
      } else {
        //修改
        this.updateADDress();
      }
    },
    //添加地址
    addressSave() {
      this.centerDialogVisible = false;
      var Address = {
        asName: this.Address.asName,
        asTelephone: this.Address.asTelephone,
        asAddress: this.Address.asAddress,
      };
      address.saveAddress(Address).then((res) => {
        this.$message({
          showClose: true,
          message: "地址添加成功",
          type: "success",
        });
        this.getList(this.page, this.size);
      });
    },
    //地址修改
    updateADDress() {
      address.update(this.Address).then((res) => {
        this.$message({
          showClose: true,
          message: "地址修改成功",
          type: "success",
        });
        this.getList(this.page, this.size);
        this.centerDialogVisible = false;
      });
    },

    // 修改默认
    switchUodate(id) {
      var addresss = { asId: id, asDefault: 1 };
      address.updateAddress(addresss).then((res) => {
        this.$message({
          showClose: true,
          message: "默认地址置顶成功！",
          type: "success",
        });
        this.getList(this.page, this.size);
      });
    },
    //获取数据
    getList(page, size) {
      address.getAddress(page, size).then((res) => {
        this.list = res.data.data.list;
        this.page = res.data.data.page;
        this.size = res.data.data.size;
        this.pages = res.data.data.pages;
        this.total = res.data.data.total;
        // console.log(res);
      });
    },
    currentChage(e) {
      this.getList(e, this.size);
    },
    //弹窗提示
    ElementAlert() {
      this.$notify.success({
        title: "提示！",
        message: "欢迎你来到地址修改区",
        showClose: true,
        duration: 2000,
      });
    },
  },
  created() {
    this.ElementAlert();
    this.getList(this.page, this.size);
  },
};
</script>

<style>
</style>